<template>
 <div class="app">
        <div
        @click="$router.push(`/prodetail/?name=${ele.name}`)"
        class="movietext" v-for="(ele,index) in list" :key="index">
            <!-- 左 -->
        <div class="left">
                <img :src="ele.img" alt="">
            </div>
            <!-- 中 -->
            <div class="center">
                <div class="center-header">{{ele.name}}</div>
                <div v-if="ele.flag" class="center-header2">
                    <span  style="font-size: 3.1vw;">淘票票评分</span>
                    <span style="font-size:3.4vw;color:rgb(244, 138, 16);margin-left:1vw">{{ele.score}}</span>
                </div>
                <div class="center-header2">
                    <span style="font-size:3.4vw;color:rgb(244, 138, 16);margin-left:1vw">{{ele.number2}}</span>
                    <span style="font-size: 3.1vw;margin-right:2vw;margin-left:1vw;">想看</span>
                    <span style="font-size: 3.1vw;color:#999">|</span>
                    <span style="font-size: 3.1vw; margin-left:2vw">{{ele.time2}}</span>
                </div>
                <div class="center-header3">
                    <span style="font-size: 3.1vw;">导演:</span>
                    <span style="font-size: 3.1vw;margin-left:1vw;">{{ele.actor[0].name}}</span>
                </div>
                <div class="center-header3">
                    <span style="font-size: 3.1vw;">主演:</span>
                    <span v-for="(item,index2) in ele.actor.slice(1)" :key="index2"  style="font-size: 3.1vw;margin-left:1vw;">{{item.name}}</span>
                </div>
            </div>
            <!-- 右 -->
            <div class="right">
                <van-button @click="ByMovie(index)" v-if="ele.flag" round size="small" color="linear-gradient(to right, #ff6034, #ee0a24)" type="info">购票</van-button>
                <van-button @click="ByNoMovie"  v-else round size="small" color=" linear-gradient(to right, #74dbf3, #26a6ea)" type="info">预售</van-button>
            </div>
    </div>
   <div class="admin-zw" style="margin-bottom:16vw"></div>
 </div>
</template>

<script>
// import Bus from '@/utils/EvenBus'
import { getMovieList, setInfoSearch } from '@/api/movielist'
export default {
  name: 'MoviePage',
  props: {
    list: {
      type: Array
    }
  },
  data () {
    return {
      historylist: []
    }
  },
  computed: {
    listlen () {
      return this.list.actor.length
    }
  },
  created () {
    this.getHisoty()
  },
  methods: {
    // 获取增加电影记录
    getHisoty () {
      this.historylist = getMovieList()
    },
    ByMovie (index) {
      event.stopPropagation()
      if (!this.$store.getters.token) {
        this.$dialog
          .confirm({
            title: '温馨提示',
            message: '此时需要先登录才能继续操作'
          })
          .then(() => {
            this.$router.replace({
              path: '/login',
              query: {
                backUrl: this.$route.fullPath
              }
            })
          })
          .catch(() => {})
      } else {
        // 选择座位
        this.$store.commit('setShowDialog', true)
        this.historylist[index].buy = true
        setInfoSearch(this.historylist)
      }
    },
    ByNoMovie () {
      event.stopPropagation()
      this.$toast({
        type: 'fail',
        message: '预售功能未开放'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.movietext{
    width: 100%;
    padding: 3vw;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 3vw;
    margin-top: 3vw;
    .left{
        width: 26%;
        height: 30vw;
        // linear-gradient(to right, #74dbf3, #26a6ea)
        img{
            width: 100%;
            height: 100%;
            border-radius: 2.7vw;
        }
    }
    .center{
        width: 55%;
        height: 33vw;
        padding: 0 2.5vw;
        .center-header{
            font-size: 5.1vw;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
         .center-header2{
            margin-top: 2vw;
            letter-spacing: 0.2vw;
            color: #585656;
            //文字超出隐藏
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
       .center-header3{
            margin-top: 1vw;
            letter-spacing: 0.2vw;
            color: #585656;
            // 文字溢出隐藏
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
    .right{
        width: 19%;
        height: 12vw;
        margin-top: 8vw;
        ::v-deep .van-button__content{
            width: 13vw;
            letter-spacing: 0.6vw;
        }
    }
}
</style>
